<template>
  <el-dialog
    title="订单详细信息"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <el-card :body-style="{ padding: '10px' }" v-if="storeInfo">
      <el-row>
        <el-col :span="12">
          <el-descriptions :title="'订单号：'+ orderInfo.orderNumber " :column="1">
            <el-descriptions-item label="租期">{{ orderInfo.driveStartDate }} - {{ orderInfo.driveEndDate }}
            </el-descriptions-item>
            <el-descriptions-item label="租金总额">￥{{ orderInfo.totalAmount }}</el-descriptions-item>
            <el-descriptions-item label="门店地址">
              {{ storeInfo.address }}
            </el-descriptions-item>

            <el-descriptions-item label="所租车辆">{{ carInfo.carName }}</el-descriptions-item>
            <el-descriptions-item label="车牌号">
              <el-tag size="small">{{ carInfo.carPlateNumber }}</el-tag>
              <!--          <el-tag type="success" v-if="carInfo.carPlateNumber.substring(2).length ==6"-->
              <!--          >{{ carInfo.carPlateNumber.substring(0, 2) }} ● {{ carInfo.carPlateNumber.substring(2) }}-->
              <!--          </el-tag>-->
              <!--          <el-tag v-if="carInfo.carPlateNumber.substring(2).length ==5"-->
              <!--          >{{ carInfo.carPlateNumber.substring(0, 2) }} ● {{ carInfo.carPlateNumber.substring(2) }}-->
              <!--          </el-tag>-->
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="出车检查单" v-if="lendCheckInfo" :column="1">
            <el-descriptions-item label="车况描述">{{ lendCheckInfo.description }}</el-descriptions-item>
            <el-descriptions-item label="出车时间">{{ lendCheckInfo.lendDate }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="还车检查单" v-if="returnCheckInfo" :column="1">
            <el-descriptions-item label="车况描述">{{ returnCheckInfo.description }}</el-descriptions-item>
            <el-descriptions-item label="还车时间">{{ returnCheckInfo.returnDate }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <div style="width: 100%;height: 400px;">
            <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="marker.position" >
              <el-amap-marker  :position="marker.position" :title="marker.title" :label="marker.title"></el-amap-marker>
            </el-amap>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {getDetailOrder} from '@/api/oms/order'
import {Descriptions} from "element-ui";

export default {
  name: 'OrderDetail',
  dicts: ['order_status', 'pay_type'],
  components: {Descriptions},
  props: {
    orderId: String,
    dialogVisible: Boolean
  },
  data() {
    return {
      orderInfo: {},
      userInfo: {},
      carInfo: {},
      lendCheckInfo: {},
      showInfo: false,
      showLend: false,
      showReturn: false,
      returnCheckInfo: {},
      storeInfo: {},
      marker:{},
      zoom: 16,
      zooms: [10, 22],
    }
  },
  mounted() {
    this.getOrderDetail(this.orderId)
  },
  methods: {
    getOrderDetail(orderId) {
      console.log('拿到id了', orderId)
      if (orderId !== '') {
        getDetailOrder(orderId).then(res => {
          this.orderInfo = res.data.order
          this.userInfo = res.data.user
          this.carInfo = res.data.car
          this.storeInfo = true
          this.lendCheckInfo = res.data.lendCheck
          this.showLend = this.lendCheckInfo != null ? 1 : 0
          this.returnCheckInfo = res.data.returnCheck
          this.showLend = this.returnCheckInfo != null ? 1 : 0
          this.storeInfo = res.data.store
        })
        this.marker.position=[this.storeInfo.position.split(',')[0],this.storeInfo.position.split(',')[1]]
        this.marker.title=this.storeInfo.storeName
        console.log(this.marker)
      }

    },
    handleClose(done) {
      this.carInfo = ''
      this.reset()
      console.log('取消操作')
      this.$emit('changeShow')
    },
    reset() {
      this.orderInfo = {}
      this.userInfo = {}
      this.carInfo = {}
      this.lendCheckInfo = {}
      this.returnCheckInfo = {}
      this.storeInfo = {}
      this.showLend = false
      this.showReturn = false
      this.storeInfo = false
    }
  }
}
</script>

<style scoped>

</style>
